<template>
  <div class="register">
    <div class="title">注册账号</div>
    <div class="settle">商家入驻申请</div>
    <router-link to="/login-register/login" class="tologin">已有账号，去登陆</router-link>

    <m-form v-show="!showSuccess" ref="form" :model="formData" :rules="rules" style="width: 439px;"
            label-position="left" label-width="120px" hide-required-asterisk>
      <m-form-item prop="mobile">
        <template slot="label">
          <div class="label-wrap">
            <img src="~/assets/images/login-mobile-icon.png" alt="" class="label-icon"
                 style="width: 15px; height: 22px;">
            <div class="label-text">手机号码</div>
          </div>
        </template>
        <m-input v-model="formData.mobile" oninput="value=value.replace(/[^\d]/g,'')" maxLength='11'
                 style="width: 356px; display: inline-block;"/>
      </m-form-item>

      <m-form-item prop="password">
        <template slot="label">
          <div class="label-wrap">
            <img src="~/assets/images/login-password-icon.png" alt="" class="label-icon"
                 style="width: 16px; height: 20px;">
            <div class="label-text">密码</div>
          </div>
        </template>
        <m-input v-model="formData.password" show-password type="password"
                 style="width: 356px; display: inline-block;"/>
      </m-form-item>

      <m-form-item prop="twice">
        <template slot="label">
          <div class="label-wrap">
            <img src="~/assets/images/login-twice-icon.png" alt="" class="label-icon"
                 style="width: 18px; height: 22px;">
            <div class="label-text">确认密码</div>
          </div>
        </template>
        <m-input v-model="formData.twice" show-password type="password" style="width: 356px; display: inline-block;"/>
      </m-form-item>

      <m-form-item prop="verify">
        <template slot="label">
          <div class="label-wrap">
            <img src="~/assets/images/login-verify-icon.png" alt="" class="label-icon"
                 style="width: 16px; height: 20px;">
            <div class="label-text">验证码</div>
          </div>
        </template>
        <div style="width: 356px; display: flex; justify-content: space-between;">
          <m-input style="width: 180px;" v-model="formData.verify" maxLength="4"/>
          <img @click="imgCaptcha()" class="captchaimg verify" :src="userInfo.imgurl" alt="">
        </div>
      </m-form-item>

      <m-form-item prop="msg">
        <template slot="label">
          <div class="label-wrap">
            <img src="~/assets/images/login-msg-icon.png" alt="" class="label-icon"
                 style="width: 16px; height: 14px;">
            <div class="label-text">短信验证码</div>
          </div>
        </template>
        <div style="width: 356px; display: flex; justify-content: space-between;">
          <m-input style="width: 180px;" v-model="formData.msg" oninput="value=value.replace(/[^\d]/g,'')"/>
          <m-button :disabled="flag" @click="phoneCaptcha()" width="160">{{ content }}</m-button>
        </div>
      </m-form-item>

      <m-form-item margin="15">
        <m-checkbox v-model="agreement"/>
        <div class="agreement">我已阅读并同意
          <router-link class="keywords" to="" @click.native="showAgreement = true">《用户注册协议》</router-link>
        </div>
      </m-form-item>

      <m-form-item margin="15">
        <m-button width="235" @click="handleClick">注册</m-button>
      </m-form-item>
    </m-form>

    <!-- 注册成功 -->
    <div v-show="showSuccess" class="success">
      <img src="~/assets/images/register-success-icon.png" alt="">
      <div class="text">注册成功!</div>
      <m-button width="235" @click="toLogin">去登录</m-button>
    </div>

    <!-- 协议 -->
    <div v-if="showAgreement" class="agreement-panel">
      <img class="close-icon" src="~/assets/images/close1.png" alt="" @click="showAgreement = false">
      <div class="title">{{ rules.title }}</div>
      <div class="text" v-html="rules.content" />
    </div>
  </div>
</template>

<script>
import MForm from '@/components/common/m-form/MForm'
import MFormItem from '@/components/common/m-form/MFormItem'
import MInput from '@/components/common/m-input/MInput'
import MButton from '@/components/common/m-button/MButton'
import MCheckbox from '@/components/common/m-checkbox/MCheckbox'
import { mobile, password } from '@/utils/validates'
import { Register, getImgCaptcha, getPhoneCaptcha, platformRules } from '@/request/api'

export default {
  name: 'Register',
  components: { MForm, MFormItem, MInput, MButton, MCheckbox },
  data() {
    const twice = (rule, val, cb) => {
      if (val === '') {
        cb(new Error('请再次输入密码'))
      } else if (val !== this.formData.password) {
        cb(new Error('两次密码不同'))
      } else if (!val) {
        cb(new Error('请重复输入密码'))
      } else {
        cb()
      }
    }

    return {
      formData: {},
      agreement: true,
      rules: {
        mobile: [{ validator: mobile, trigger: 'blur' }],
        password: [{ validator: password, trigger: 'blur' }],
        twice: [{ validator: twice, trigger: 'blur' }],
        verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        msg: [{ required: true, message: '请输入短信验证码', trigger: 'blur' }]
      },
      showSuccess: false,
      showAgreement: false,
      flag: false,
      content: '获取短信验证码',
      totalTime: 60,
      userInfo: {
        imgurl: null,
      },
      imgkey: "",
      rules:{}
    }
  },
  created() {
    this.imgCaptcha()
    this.getRules()
  },
  watch: {
    'formData.verify': function () {
      this.formData.verify = this.formData.verify.replace(/[\W]/g, '')
    }
  },
  methods: {
    getRules() {
      platformRules(2).then(res => {
        this.rules = res.data
      })
    },
    phoneCaptcha() {
      let that = this
      let phone = this.formData.mobile
      if (!phone) {
        that.$toast.show('请填写手机号', 1000, false)
      } else if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(phone)) {
        that.$toast.show('请填写正确的手机号', 1000, false)
      } else {
        getPhoneCaptcha({
          phone: this.formData.mobile,
          type: 'register',
          code: '',
          key: '',
        }).then(res => {
          if (res.status === 200) {
            this.flag = true
            this.content = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.content = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.content = '重新发送验证码'
                this.totalTime = 60
                this.flag = false
              }
            }, 1000)
          } else {
            that.$toast.show(res.message, 1000, false)
          }
        })
      }
    },
    imgCaptcha() {
      getImgCaptcha().then(
          res => {
            this.userInfo.imgurl = res.data.captcha
            this.imgkey = res.data.key
          }
      )
    },
    handleClick() {
      let that = this
      this.$refs.form.$refs.mForm.validate(res => {
        if (res) {
          let data = {
            phone: that.formData.mobile,
            pwd: that.formData.password,
            sms_code: that.formData.msg,
            img_code: that.formData.verify,
            key: that.imgkey
          }
          Register(data).then(res => {
            if (res.status === 200) {
              that.showSuccess = true
            } else {
              that.$toast.show(res.message, 1000, false)
              that.imgCaptcha()
            }
          })
        }

      })
    },
    toLogin() {
      this.$router.push({
        path: '/login-register/login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.register {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .label-wrap {
    display: inline-flex;
    align-items: center;

    .label-text {
      font-size: 16px;
      color: #969696;
    }

    .label-icon {
      margin-right: 10px;
    }
  }

  .title {
    color: $theme-color-1;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .settle {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    color: #969696;
    cursor: pointer;
  }

  .tologin {
    font-size: 14px;
    color: #969696;
    padding-bottom: 5px;
    border-bottom: solid 1px #969696;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
  }

  .agreement {
    display: inline;
    margin-left: 10px;
    font-size: 14px;
    color: #969696;

    .keywords {
      color: $theme-color-1;
    }
  }

  .success {
    width: 100%;
    height: 100%;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 95px;
      height: 95px;
      margin-bottom: 60px;
    }

    .text {
      font-size: 22px;
      color: $theme-color-1;
      margin-bottom: 60px;
    }
  }

  .agreement-panel {
    position: absolute;
    top: calc(50% - 265px);
    left: calc(50% - 300px);
    z-index: 99;
    width: 600px;
    height: 530px;
    background-color: #fff;
    border: solid 1px #eaeaea;
    display: flex;
    flex-direction: column;
    align-items: center;

    .close-icon {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
    }

    .title {
      margin-top: 30px;
      font-size: 18px;
      color: #969696;
    }

    .text {
      width: 100%;
      height: 350px;
      padding: 0 50px;
      font-size: 16px;
      overflow-y: auto;
      color: #969696;
      line-height: 35px;
    }
  }
}
</style>
